<template>
	<view class="container">
		<view class="content">
			<view class="content-top">
				<view class="content-top-one d-rn d-ac d-jb">
					<text>{{ $t('start_time') }}</text>
					<!-- <text style="color: #ff0000">{{
            `${info.signInTime}-${info.signOutTime}`
          }}</text> -->
					<view class="date-box">
						<picker @change="handleGetStartTime" mode="date">
							<view class="d-rn d-ac d-jc">
								<view class="picker-con d-rn d-ac">
									<view class="uni-input one-txt-cut date-style">
										{{ startDate.date || $t('select_date') }}
									</view>
								</view>
							</view>
						</picker>
						<view class="date-style" @click="handleShowPicker(1)" v-if="!info.isDay">
							{{ startDate.time || $t('select_time') }}
						</view>
					</view>
				</view>
				<view class="content-top-one d-rn d-ac d-jb">
					<text>{{ $t('end_time') }}</text>
					<!-- <text style="color: #ff0000">{{
            `${info.signInTime}-${info.signOutTime}`
          }}</text> -->
					<view class="date-box">
						<picker @change="handleGetEndTime" mode="date">
							<view class="d-rn d-ac d-jc">
								<view class="picker-con d-rn d-ac">
									<view class="uni-input one-txt-cut date-style">
										{{ endDate.date || $t('select_date') }}
									</view>
								</view>
							</view>
						</picker>
						<view class="date-style" @click="handleShowPicker(2)" v-if="!info.isDay">
							{{ endDate.time || $t('select_time') }}
						</view>
					</view>
				</view>

				<view class="content-top-one d-rn d-ac d-jb">
					<text>{{$t('overtime_hours')}}</text>
					<!-- <view class="content-top-one-right d-rn d-ac" v-if="!info.isDay">
						<input type="text" style="width: 100%; text-align: right; font-size: 24rpx" placeholder="请输入加班时长"
							v-model="form.duration" />
						<text style="white-space: nowrap; font-size: 24rpx">（小时）</text>
					</view> -->
					<view class="content-top-one-right d-rn d-ac" v-if="info.isDay">
						<text>{{ $t('auto_calculate') }}</text>
					</view>

				</view>
				<view class="content-top-one d-rn d-ac d-jb" v-if="info.overTimeRule == 1">
					<text>{{ $t('application_duration') }}</text>
					<view class="content-top-one-right d-rn d-ac">
						<input type="text" style="width: 100%; text-align: right; font-size: 24rpx"
							:placeholder="$t('please_enter_application_duration')" v-model="form.applyTime" />
						<text style="white-space: nowrap; font-size: 24rpx">（小时）</text>
					</view>

				</view>

			</view>
			<view class="content-min">
				<view class="content-min-title">
					<text>{{ $t('reason1') }}</text>
				</view>
				<view class="content-min-text">
					<textarea name="" id="" cols="30" rows="10" :placeholder="$t('reason_placeholder')" placeholder-style="color:#CCCCCC;"
						v-model="form.remark"></textarea>
				</view>
				<view class="content-min-upload" @click="upLoadImage">
					<image :src="form.pic ? form.pic : '../../static/img/upload.png'" mode=""></image>
				</view>
			</view>
			<view class="content-bto">
				<view class="content-bto-title">
					<text>{{ $t('approval_flow') }}</text>
				</view>
				<view class="">
					<u-steps dot direction="column" :current="current" class="stepbox">
						<u-steps-item v-for="(item, index) in stepList" :key="index">
							<view class="stepbox-big d-rn" slot="desc">
								<view>
									<image :src="baseUrl + item.approveAvatar" mode=""></image>
								</view>
								<view class="stepbox-big-word d-cw">
									<text>{{ item.approveName }} <text>{{ item.zhiweu }}</text>
									</text>
									<!-- <text>{{!item.sts?'审批中':item.sts==1?'已同意':'已驳回'}}</text> -->
								</view>
							</view>
						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</view>
		<view class="footer d-rn d-ac d-jc" @click="handleSubmit">
			<text class="d-rn d-ac d-jc">{{ $t('Save') }}</text>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" mode="time" @confirm="handleConfirm"
			@cancel="handlecancel"></u-datetime-picker>
	</view>
</template>

<script>
var _self;
import {
	applyOvertime,
	getApprovalName
} from "../../api/index.js";
import request from "@/request/config.js";
export default {
	data() {
		return {
			pickType: 1,
			show: false,
			updateTime: 2,
			value: Number(new Date()),
			current: 0,
			stepList: [],
			info: {},
			startDate: {
				date: "",
				time: ""
			},
			endDate: {
				date: "",
				time: ""
			},
			form: {
				remark: "",
				duration: "",
				pic: "",
			},
			baseUrl: request.baseUrl,
		};
	},
	onLoad(options) {
		_self = this;
		if (options && options.data) {
			this.info = JSON.parse(decodeURIComponent(options.data));
			console.log('this.info', this.info);
			this.startDate.date = this.info.punchDate;
			this.endDate.date = this.info.punchDate;
		}
		_self.getgetApprovalName();
	},
	methods: {
		compareHour() {
			if (this.startDate.date && this.startDate.time && this.endDate.date && this.endDate.time) {
				// 两个日期
				const date1 = new Date(`${this.startDate.date}T${this.startDate.time}:00`);
				const date2 = new Date(`${this.endDate.date}T${this.endDate.time}:00`);

				// 计算相差的时间（毫秒）
				const timeDiff = Math.abs(date2.getTime() - date1.getTime());

				// 将时间差转换为小时
				this.form.duration = parseFloat(timeDiff / (1000 * 60 * 60)).toFixed(1);
			}
		},
		handleShowPicker(type) {
			this.pickType = type
			this.show = true
		},
		handlecancel() {
			this.show = false
		},
		handleConfirm(time) {
			if (this.pickType === 1) {
				this.startDate.time = time.value
			} else {
				this.endDate.time = time.value
			}
			this.compareHour()
			this.show = false
		},
		handleGetEndTime(date) {
			this.endDate.date = date.detail.value
			this.compareHour()
		},
		handleGetStartTime(date) {
			this.startDate.date = date.detail.value
			this.compareHour()
		},
		handleSubmit() {
			this.form.attendanceRecordId = this.info.id;
			this.form.startDate = this.startDate.date;
			this.form.endDate = this.endDate.date;

			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('submit_confirm'),
				cancelColor: '#353535',
				confirmColor: '#215AA0',
				cancelText: this.$t('cancel'),
				// showCancel: false,
				confirmText: this.$t('picker_confirm'),
				success: function (res) {
					if (res.confirm) {
						applyOvertime(this.form).then((res) => {
							if (res.code == 200) {
								_self.$commonFun.showTips(res.msg);
								setTimeout(function () {
									_self.$commonFun.goUrl(2, "../clockIn/index");
								}, 1000);
							}
						});
					} else if (res.cancel) { }
				}
			})

		},
		// 获取审批流程
		getgetApprovalName() {
			getApprovalName({
				incident: 5,
			}).then((res) => {
				if (res.code == 200) {
					_self.stepList = res.data;
				}
			});
		},
		// 上传图片
		upLoadImage() {
			let upInfo = {
				baseUrl: this.baseUrl + "/common/upload",
				baseName: "file",
				token: uni.getStorageSync("AUTHORIZATION"),
			};
			_self.$commonFun.handleUpImg(1, upInfo, 1).then((res) => {
				console.log('resimg', res)
				// 把res中http://替换成https://
				res = res.replace("http://", "https://");
				_self.form.pic = res;
			});
		},
		// applyOvertime
	},
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.container {
	width: 100%;

	.footer {
		width: 100%;
		height: 134rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0%;
		left: 0%;

		text {
			width: 702rpx;
			height: 86rpx;
			background: #fed72e;
			border-radius: 43px;
			box-shadow: 0px 4px 8px 0px rgba(250, 222, 78, 0.5);
		}
	}

	.content {
		width: 100%;
		padding-bottom: 186rpx;
		box-sizing: border-box;

		&-top {
			background-color: #ffffff;

			&-one {
				padding: 30rpx 24rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		&-min {
			width: 100%;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			margin: 24rpx 0;
			background-color: #ffffff;

			&-title {
				text {
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 12rpx;
				}
			}

			&-text {
				textarea {
					width: 100%;
					color: #333;
				}
			}

			&-upload {
				image {
					width: 136rpx;
					height: 136rpx;
				}
			}
		}

		&-bto {
			width: 100%;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			margin: 24rpx 0;
			background-color: #ffffff;

			.stepbox {
				padding: 40rpx;
				box-sizing: border-box;

				&-big {
					padding: 0 70rpx 60rpx 30rpx;
					box-sizing: border-box;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 30rpx;
					}

					&-word {
						text:nth-of-type(1) {
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;

							text {
								font-size: 26rpx;
								margin-left: 20rpx;
							}
						}

						text:nth-of-type(2) {
							font-size: 30rpx;
							font-weight: 500;
							color: #999999;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
}

.date-style {
	font-size: 28rpx;
	color: #ff0000;
	margin-right: 20rpx;
}

.date-box {
	display: flex;
}
</style>